<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格化管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>责任网格</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="common-layout" style="margin-top: 15px;">
        <el-container>
            <el-aside width="200px">


                <el-input v-model="filterText" class="w-60 mb-2" placeholder="关键字" />

                <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data" :props="defaultProps"
                    default-expand-all :filter-node-method="filterNode" @node-click="nodeClick" />



            </el-aside>

            <el-aside width="80%">

                <div style="border: 1px solid #ccc; padding: 14px;">
                    <!-- 行内表单 -->
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="网格名称">
                            <el-input v-model="formInline.DutyGridName" placeholder="请输入网格名称" clearable />
                        </el-form-item>
                        <el-form-item label="区域名称">
                            <el-input v-model="formInline.AreaName" placeholder="请输入区域名称" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">搜索</el-button>
                        </el-form-item>
                    </el-form>

                </div>

                <div style="border: 1px solid #ccc; padding: 14px; margin-top: 20px;">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" width="90" />
                        <el-table-column prop="dutyGridCode" label="网格编号" width="120" />
                        <el-table-column prop="dutyGridName" label="网格名称" width="120" />
                        <el-table-column prop="dutyGridType" label="网格类型" width="120" />
                        <el-table-column prop="areaName" label="所属区域" width="600" />
                        <el-table-column fixed="right" label="操作" min-width="180">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="toEdit(scope.row)">
                                    编辑
                                </el-button>
                                <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>

            </el-aside>
        </el-container>
    </div>
    {{ ruleForm }}
    <el-dialog v-model="dialogUpdate" title="更新责任网格" width="500">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="网格类型">
                <el-input v-model="ruleForm.dutyGridType" disabled="true" />
            </el-form-item>

            <el-form-item label="所属区域">
                <!-- 级联 -->
                <el-cascader style="width: 400px;" v-model="ruleForm.areaId" :options="options" :props="props" />
            </el-form-item>


            <el-form-item label="网格编码" prop="dutyGridCode">
                <el-input v-model="ruleForm.dutyGridCode" />
            </el-form-item>

            <!-- 网格名称,必须是中文 -->

            <el-form-item label="网格名称" prop="dutyGridName">
                <el-input v-model="ruleForm.dutyGridName" />
            </el-form-item>

            <!-- 重点 -->
            <el-form-item label="管理单元网格">

                <el-checkbox-group v-model="ruleForm.unitGridArr">

                    <el-checkbox v-for="item in units" :value="item.unitGridName" name="type">
                        {{ item.unitGridName }}
                    </el-checkbox>


                </el-checkbox-group>
            </el-form-item>



            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>


    </el-dialog>


</template>


<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'

import { ElMessage, ElMessageBox, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import http from '@/http/axiosHelper';


import type { FormInstance, FormRules } from 'element-plus'

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'areaName',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.areaName.includes(value)
}

const treeNodeId = ref(0)
const data = ref([])
const getData = () => {
    http.get('/T7/Area/GetAreaTree').then(res => {
        data.value = res.data.data
    })
}

const nodeClick = (x: any) => {//x是节点绑定的数据
    console.log(x);
    treeNodeId.value = x.id
}

//搜索行内表单
const formInline = reactive({
    DutyGridName: '',
    AreaName: ''
})

const tableData = ref([])
const search = () => {
    http.get('/T7/Duty/GetDutyGrid', { params: formInline }).then(res => {
        tableData.value = res.data.data

    }
    )

}


//弹窗编辑
const dialogUpdate = ref(false)
const toEdit = (row: any) => {
    dialogUpdate.value = true

    Object.assign(ruleForm, row)
    //把数据库里的数据分隔为数组,赋值给双向绑定的数组
    ruleForm.unitGridArr = ruleForm.unitGrids.split(',');

}


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "id": 0,
    "dutyGridType": "责任网格",
    "dutyGridName": "",
    "dutyGridCode": "",
    "areaId": 0,
    "unitGrids": "",
    "unitGridArr": []

})



const rules = reactive<FormRules>({
    dutyGridCode: [
        { required: true, message: '请输入网格编号', trigger: 'blur' },
        { min: 2, max: 15, message: '网格编号长度为2-15位', trigger: 'blur' },
    ], dutyGridName: [
        { required: true, message: '请输入网格名称', trigger: 'blur' },
        { min: 2, max: 15, message: '网格编号名称为2-15位', trigger: 'blur' },
        //  {pattern:/^([\u4e00-\u9fa5]{2,6})$/,message: '必须是中文',trigger:'blur'}
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            http.put('/T8/Dudy/UpdateDuty', ruleForm).then(res => {

                if (res.data.code == 200) {
                    //弹出消息提示成功!
                    ElMessage.success(res.data.msg);
                    //关闭弹窗
                    dialogUpdate.value = false
                    //刷新数据(非页面)
                    search()
                    //清理表单变量
                    Object.assign(ruleForm, null)
                }else{
                       ElMessage.error(res.data.msg);
                }
            })


        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//表单里的级联区域--所属区域
const options = ref([])
const getOptions = () => {
    http.get('/T7/Area/GetAreaTree').then(res => {
        console.log(res);
        options.value = res.data.data
    })
}

//级联的属性  --props 包含展示的字段(areaName),包含值字段(id),还包含子集(children)
//emitPath:true 数组  false 单个值
//checkStrictly  可选择任意一级
const props = {
    value: 'id',
    label: 'areaName',
    children: 'children',
    emitPath: false,
    checkStrictly: true
}


//表单里的复选框
const units = ref([
    {
        "unitGridName": "单元网格9",
        "id": 4
    }
])
const getUnits = () => {
    http.get('/T7/Duty/GetUnitGridPages?PageSize=100000000').then(res => {
        units.value = res.data.pageDatas
    })
}

//表格行数据的删除

const del = (id: any) => {
    ElMessageBox.confirm(
        '您确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.put('http://localhost:5106/api/Dudy/DelDuty', {
                "id": id
            }).then(res => {
                
                if (res.data.code == 200) {
                    //弹出消息提示成功!
                    ElMessage.success(res.data.msg);
                     
                    //刷新数据(非页面)
                    search() 
                }else{
                       ElMessage.error(res.data.msg);
                }

            })


        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}


onMounted(() => {

    search()
    getData()
    getOptions()
    getUnits()
})


</script>
